<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 1. 为每个资源创建 `img`。
    2. 为每个图片添加 `onload/onerror`。
    3. 在 `onload` 或 `onerror` 被触发时，增加计数器。
    4. 当计数器值等于资源值时 —— 我们完成了：`callback()`。 -->
    <script>
        var sources = [
            "https://example.com/404.js",
            "https://img1.baidu.com/it/u=875835162,491694973&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200",
            "https://img2.baidu.com/it/u=3788597767,2865640901&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200"

        ];
        // function preloadImages(sources, callback) {
        //     var count = 0;
        //     for (var i = 0; i < sources.length; i++) {
        //         var img = document.createElement('img');
        //         img.src = sources[i]
        //     }
        //     img.onload = function () {
        //         count++;
        //         if (count == sources.length) {
        //             callback();
        //         }
        //     }
        //     img.onerror = function () {
        //         count++;
        //         if (count == sources.length) {
        //             callback();
        //         }
        //     }
        //     alert('end');
        // }preloadImages(sources);


            //获取数组的长度
            // var le = sources.length;
            //遍历数组
            function preloadImages(sources, callback) {
                var count = 0;
            for (var values of sources) {
                console.log(values);
                //给每个资源创建img属性
                var img = document.createElement('img');
                console.log(img);
                //将图片的地址改为数组中的地址
                img.src = values;
            }
            img.onload = function(){
                count++;
                if(count == sources.length){
                    callback();
                }
            }
            img.onerror = function(){
                count++;
                if(count == sources.length){
                    callback();
                }
            }
            alert('end')
        } preloadImages(sources);
    </script>
</body>

</html>